<template>
  <div id="publish-sell">
    <!-- 导航栏 -->
    <van-nav-bar @click-left="back" class="navbar">
      <template #left>
        <van-icon name="arrow-left" size="18" color="#f7f8fa" />
      </template>
      <template #title>
        <div name="arrow-left" class="title">发布出售</div>
      </template>
    </van-nav-bar>

    <!-- 今日价格 -->
    <van-cell-group style="margin-top: 10px">
      <van-cell title="今日价格" label="￥1.5" class="present-price" />
    </van-cell-group>

    <!-- 表单信息 -->
    <van-form @submit="onSubmit" style="margin-top: 10px">
      <van-field v-model="total" label="总价" placeholder="￥0" readonly />
      <van-field v-model="price" type="number" label="单价" placeholder="请输入单价" :formatter="formatter" />
      <van-field v-model="num" type="digit" label="数量" placeholder="请输入数量" />
      <van-field v-model="password" type="password" label="密码" placeholder="请输入交易密码" />
    </van-form>

    <!-- 支付方式 -->
    <van-radio-group v-model="paymentMethod" style="margin-top: 10px">
      <van-cell-group>
        <van-cell title="支付宝" center clickable @click="paymentMethod = 'alipay'">
          <template #icon>
            <van-icon name="alipay" class="icon" />
          </template>
          <template #right-icon>
            <van-radio name="alipay"/>
          </template>
        </van-cell>
        <van-cell title="必选" center clickable @click="paymentMethod = 'bx'">
          <template #icon>
            <van-icon name="chat" class="icon" />
          </template>
          <template #right-icon>
            <van-radio name="bx" />
          </template>
        </van-cell>
      </van-cell-group>
    </van-radio-group>

    <!-- 提交按钮 -->
    <van-tabbar v-model="active" active-color="#545c80">
      <van-tabbar-item icon="circle">提交</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
  export default {
    name: "PublishSell",
    data() {
      return {
        total: '',
        price: '',
        num: '',
        password: '',
        paymentMethod: 'alipay',
        active: 0,
        pattern: /^\d*(\.\d{0,2})?$/,
      };
    },
    methods: {
      back() {
        this.$router.back(-1);
      },
      onSubmit(values) {
        console.log('submit', values);
      },
      formatter(val) {
        // 输入的数字小数点后超过2位时，只保留2位
        if (!this.pattern.test(val)) {
          return this.price;
        }

        return val;
      },
    },
    watch: {
      price: function (val, oldVal) {
        if (val === '' || this.num === '') {
          return;
        }
        this.total = (val * this.num).toFixed(2);
      },
      num: function (val, oldVal) {
        if (val === '' || this.price === '') {
          return;
        }
        this.total = (val * this.price).toFixed(2);
      },
    },
  }
</script>

<style scoped>
  .navbar {
    background-color: #545c80;
  }
  .title {
    color: #f7f8fa;
    font-size: 14px;
  }
  .present-price {
    text-align: center
  }
  .icon {
    color: #1989fa;
    font-size: 30px;
    margin-right: 10px;
  }
</style>
